<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Multiple Language Timed Text Sample</title>
    <script class="code" src="../../contrib/akamai/controlbar/ControlBar.js"></script>
    <script src="../../dist/dash.all.debug.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../lib/main.css" rel="stylesheet">

    <link rel="stylesheet" href="../../contrib/akamai/controlbar/controlbar.css">

    <style>
        video {
            width: 100%;
        }

        .dash-video-player {
            position: relative; /* This position relative is needed to position the menus */
            margin: 0 auto;
            line-height: 1.0;
        }
    </style>

    <script class="code">
        var EXTERNAL_CAPTION_URL = "https://dash.akamaized.net/dash264/TestCases/4b/qualcomm/1/ED_OnDemand_5SecSeg_Subtitles.mpd", /* need to manually seek to get stream to start... issue with MPD but only sample with multi adaptations for external sidecar caption text xml */
            FRAGMENTED_CAPTION_URL = "https://livesim.dashif.org/dash/vod/testpic_2s/multi_subs.mpd",
            videoElement,
            controlbar,
            player;

        function init() {
            var TTMLRenderingDiv = document.querySelector("#ttml-rendering-div");
            videoElement = document.querySelector(".videoContainer video");
            player = dashjs.MediaPlayer().create();
            player.initialize(videoElement);
            player.attachTTMLRenderingDiv(TTMLRenderingDiv);
            player.on('currentTrackChanged', function(e) {
                if (e.newMediaInfo.type === 'text') {
                    setTimeout(showDomStorage, 0);
                }
            });
            controlbar = new ControlBar(player); /* Checkout ControlBar.js for more info on how to target/add text tracks to UI */
            controlbar.initialize();
            document.getElementById("lastMediaSettingsCachingInfoEnabled").checked = player.getSettings().streaming.lastMediaSettingsCachingInfo.enabled;
            showDomStorage();
        }

        function showDomStorage() {
            document.getElementById("domStorage").innerHTML = localStorage.getItem('dashjs_text_settings');
        }

        function play() {
            var url = FRAGMENTED_CAPTION_URL;
            player.attachSource(url);
            setTextDefaultEnabled();
            setLang();
            player.play();
            showDomStorage();
        }

        function setTextDefaultEnabled() {
            var checkbox = document.getElementById("textDefaultEnabled");
            player.updateSettings({streaming: {text: {defaultEnabled: checkbox.checked}}});
        }

        function setLang() {
            var lang = document.getElementById("textSettings").value;
            var role = null;
            if (lang) {
                if (lang.indexOf('-') != -1) {
                    var values = lang.split('-');
                    lang = values[0];
                    role = values[1];
                }
                player.setInitialMediaSettingsFor('text', {
                    lang: lang,
                    role: role
                });
            }
        }

        function setLastMediaSettingsCachingInfoEnabled() {
            var checkbox = document.getElementById("lastMediaSettingsCachingInfoEnabled");
            player.updateSettings({
                streaming: {
                    lastMediaSettingsCachingInfo: { enabled: checkbox.checked }
                }
            })
        }

        function clearDomStorage() {
            localStorage.removeItem('dashjs_text_settings');
            showDomStorage();
        }

    </script>
</head>
<body>

<main>
    <div class="container py-4">
        <header class="pb-3 mb-4 border-bottom">
            <img class=""
                 src="../lib/img/dashjs-logo.png"
                 width="200">
        </header>
        <div class="row">
            <div class="col-md-12">
                <div class="h-100 p-5 bg-light border rounded-3">
                    <h3>Multiple Language Timed Text Sample</h3>
                    <p>Example showing content with multiple timed text tracks.</p>
                    <p>The current texttrack settings can be saved in the local storage to be reused on the next stream startup. </p>
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-6">
                <div class="dash-video-player code">
                    <div class="videoContainer" id="videoContainer">
                        <video preload="auto" autoplay></video>
                        <div id="ttml-rendering-div"></div>
                        <div id="videoController" class="video-controller unselectable">
                            <div id="playPauseBtn" class="btn-play-pause" title="Play/Pause">
                                <span id="iconPlayPause" class="icon-play"></span>
                            </div>
                            <span id="videoTime" class="time-display">00:00:00</span>
                            <div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen">
                                <span class="icon-fullscreen-enter"></span>
                            </div>
                            <div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
                                <span class="icon-bitrate"></span>
                            </div>
                            <input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01"/>
                            <div id="muteBtn" class="btn-mute control-icon-layout" title="Mute">
                                <span id="iconMute" class="icon-mute-off"></span>
                            </div>
                            <div id="trackSwitchBtn" class="control-icon-layout" title="A/V Tracks">
                                <span class="icon-tracks"></span>
                            </div>
                            <div id="captionBtn" class="btn-caption control-icon-layout" title="Closed Caption">
                                <span class="icon-caption"></span>
                            </div>
                            <span id="videoDuration" class="duration-display">00:00:00</span>
                            <div class="seekContainer">
                                <div id="seekbar" class="seekbar seekbar-complete">
                                    <div id="seekbar-buffer" class="seekbar seekbar-buffer"></div>
                                    <div id="seekbar-play" class="seekbar seekbar-play"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="p-5 border rounded-3">
                    <h4>Settings</h4>
                <div class="settings">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox"  id="textDefaultEnabled" onchange="setTextDefaultEnabled()" checked>
                        <label class="form-check-label" for="textDefaultEnabled">
                            textDefaultEnabled
                        </label>
                    </div>
                    <div>
                        <label class="form-check-label" for="textSettings">
                            Initial settings language/role
                        </label>
                        <select class="form-select" onchange="setLang()" aria-label="Default select example" id="textSettings">
                            <option value="">-- unset initial lang and role --</option>
                            <option value="eng-subtitle">eng - subtitles</option>
                            <option value="eng-caption">eng - captions</option>
                            <option value="swe">swe - subtitles</option>
                            <option value="qbb">qbb - subtitles</option>
                            <option value="nor">nor - subtitles</option>
                        </select>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox"  id="lastMediaSettingsCachingInfoEnabled" onchange="setLastMediaSettingsCachingInfoEnabled()">
                        <label class="form-check-label" for="lastMediaSettingsCachingInfoEnabled">
                            streaming.lastMediaSettingsCachingInfo.enabled
                        </label>
                    </div>
                    <div class="mt-4">
                        <label>localStorage content: </label>
                        <div id="domStorage"></div>
                    </div>
                    <div class="mt-4">
                        <button type="button" class="btn btn-danger" onclick="clearDomStorage()">Clear localStorage</button>
                        <button type="button" id="loadButton" class="btn btn-success" onclick="play(this)">Load stream
                        </button>
                    </div>
                </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="code-output"></div>
            </div>
        </div>
        <footer class="pt-3 mt-4 text-muted border-top">
            &copy; DASH-IF
        </footer>
    </div>
</main>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        init();
    });
</script>
<script src="../highlighter.js"></script>
</body>
</html>
